@use 'variables' as *;
@use 'sass:map';

// 前台布局
.frontend-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  color: var(--text-color);

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: $header-height;
    padding: 0 $spacing-md;
    background-color: var(--bg-color-secondary);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    transition: $transition-base;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-left {
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      .logo {
        height: $spacing-xl;

        img {
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .nav-menu {
      display: flex;
      gap: $spacing-sm;
      margin: 0 $spacing-xl;

      .el-menu-item {
        height: $header-height;
        line-height: $header-height;
        padding: 0 $spacing-md;
        border-bottom: 0.125rem solid transparent;

        &.is-active {
          border-bottom-color: var(--primary-color);
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
    }
  }

  .main-content {
    margin-top: $header-height;
    flex: 1;
    padding: $spacing-md;
    min-height: calc(100vh - #{$header-height} - #{$footer-height});
  }

  .footer {
    height: $footer-height;
    background-color: var(--bg-color-secondary);
    border-top: 1px solid var(--border-color);
    padding: $spacing-sm $spacing-md;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 后台布局
.admin-layout {
  min-height: 100vh;
  display: flex;
  background-color: var(--bg-color);
  color: var(--text-color);

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: $sidebar-width;
    background-color: var(--menu-bg-color);
    border-right: 1px solid var(--border-color);
    transition: $transition-base;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;

    .logo {
      height: $admin-header-height;
      min-height: $admin-header-height;
      display: flex;
      align-items: center;
      padding: 0 $spacing-sm;
      border-bottom: 1px solid var(--border-color);
      background-color: var(--menu-bg-color);

      img {
        height: $spacing-xl;
        object-fit: contain;
      }
    }

    .el-menu {
      border-right: none;
      background-color: transparent;
      flex: 1;

      .el-menu-item,
      .el-sub-menu__title {
        height: $admin-header-height !important;
        line-height: $admin-header-height !important;
        padding: 0 $spacing-md !important;

        .el-icon {
          height: $admin-header-height !important;
          line-height: $admin-header-height !important;
          margin-right: $spacing-sm;
          font-size: $font-size-lg;
        }
      }

      .el-sub-menu {
        .el-menu-item {
          height: $footer-height !important;
          line-height: $footer-height !important;
          padding-left: $spacing-xl + $spacing-md !important;

          .el-icon {
            height: $footer-height !important;
            line-height: $footer-height !important;
          }
        }
      }
    }
  }

  .main-container {
    flex: 1;
    margin-left: $sidebar-width;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color-secondary);

    .header {
      height: $admin-header-height;
      min-height: $admin-header-height;
      background-color: var(--bg-color);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      padding: 0 $spacing-md;
      position: fixed;
      top: 0;
      right: 0;
      left: $sidebar-width;
      z-index: 99;
      color: var(--text-color);

      .breadcrumb {
        margin-right: auto;

        .el-breadcrumb__item {
          .el-breadcrumb__inner {
            color: var(--text-color-secondary);

            &.is-link:hover {
              color: var(--primary-color);
            }
          }

          &:last-child {
            .el-breadcrumb__inner {
              color: var(--text-color);
            }
          }
        }
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
      }
    }

    .main-content {
      margin-top: $admin-header-height;
      flex: 1;
      padding: $spacing-md;
      min-height: calc(100vh - #{$admin-header-height});
      background-color: var(--bg-color-secondary);
      color: var(--text-color);

      .el-card {
        background-color: var(--bg-color);
        color: var(--text-color);
        border-color: var(--border-color);
        margin-bottom: $spacing-lg;

        .el-card__header {
          border-bottom-color: var(--border-color);
          background-color: var(--bg-color);
          color: var(--text-color);
        }
      }
    }
  }
}

// 主题特定样式
.theme-dark {
  .admin-layout {
    .sidebar {
      background-color: var(--menu-bg-color);

      .el-menu {
        background-color: transparent;
      }
    }

    .main-container {
      background-color: var(--bg-color-secondary);

      .header {
        background-color: var(--bg-color);
      }

      .main-content {
        background-color: var(--bg-color-secondary);
      }
    }
  }
}

// 响应式处理
@media screen and (max-width: map.get($breakpoints, 'md')) {
  .frontend-layout {
    .header {
      padding: 0 $spacing-sm;

      .nav-menu {
        display: none;
      }

      .header-right {
        .language-switch {
          display: none;
        }
      }
    }

    .main-content {
      padding: $spacing-sm;
    }
  }

  .admin-layout {
    .sidebar {
      transform: translateX(-100%);

      &.show {
        transform: translateX(0);
      }
    }

    .main-container {
      margin-left: 0;

      .header {
        left: 0;
      }
    }
  }
}